---
import type { ListItemProps } from "@/declare/Header/Header";
import _ from "lodash";
import cfg from "blog.config";
/**
 * import  { MobileMenuId } from "@/constant/Header"
 */

export interface Props {
  ItemName?: string;
  type?: "normal" | "list";
  iconfont?: string;
  data?: ListItemProps[];
}

const _DEFAULT_PROPS_: Props = {
    ItemName: "",
    type: "list",
    iconfont: "",
  },
  { data } = Astro.props,
  {
    WebsiteSettings: { base },
  } = cfg;

let { ItemName, iconfont } = _.defaultsDeep(Astro.props, _DEFAULT_PROPS_);
---

{
  data && data.length ? (
    <div class="item list h100">
      <div class="info">
        {iconfont.length ? <i class={iconfont} /> : undefined}
        {ItemName}
      </div>
      <div class="list_item column_flex default_box_shadow">
        {data.map(({ name, href }) => (
          <a href={base + href}>{name}</a>
        ))}
      </div>
    </div>
  ) : undefined
}

<script type="module">
  /**
   * MobileMenuId = 'MobileMenu'
   */
  const MobileMenuId = "MobileMenu";
  const ItemList = document
    .getElementById(MobileMenuId)
    .querySelector(".list_menu_item")
    .querySelectorAll(".item");
  ItemList.forEach((val) => {
    val.addEventListener("click", (e) => {
      let CurrentClass = val.getAttribute("class"),
        FinalClass = "",
        isOpen = /open/.test(CurrentClass);

      if (isOpen) FinalClass = CurrentClass.replace("open");
      else FinalClass = CurrentClass + " open";

      val.setAttribute("class", FinalClass);
    });
  });
</script>

<style lang="scss">
  .item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    font-size: 0.95rem;
    padding: 0 0.7rem;
    color: var(--text-default);
    background-color: var(--background-default);
    transition: color 0.2s;
    cursor: pointer;

    &:hover,
    &.open {
      color: var(--tips-default);

      .list_item {
        display: block;
      }

      .info {
        line-height: 3rem;

        &::after {
          border-top-color: var(--tips-default);
        }
      }
    }

    .info {
      line-height: 3rem;

      &::after {
        content: " ";
        position: relative;
        top: 0.75rem;
        left: 0.3rem;
        border: 0.3rem solid var(--text-default);
        border-bottom-width: 0;
        border-left-color: transparent;
        border-right-color: transparent;
        transition: border-top-color 0.3s;
      }
    }

    &.list:hover {
      &::before {
        border-color: var(--tips-default);
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }

    .list_item {
      display: none;
      align-items: center;
      position: absolute;
      top: 4rem;
      left: calc(50% - 4rem);
      width: 8rem;
      padding: 0.4rem 0;
      color: var(--text-default);
      background-color: var(--background-default);
      border-radius: 0.4rem;

      a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.25rem 0;
        transition: none;

        &:hover {
          background-color: var(--background-active-default);
        }
      }
    }
  }

  @media screen and (max-width: 992px) {
    .item {
      flex-flow: column nowrap;
      padding: 0;

      .list_item {
        width: 95%;
        position: static;
      }
    }
  }
</style>
